<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#111; */
        /* background:#333; */
        font-family: 'Arial';
      }
      /* h1 { color: white;} */
      .mermaid2 {
        display: none;
      }
      .customCss > rect,
      .customCss {
        fill: #ff0000 !important;
        stroke: #ffff00 !important;
        stroke-width: 4px !important;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>

    <pre class="mermaid" style="width: 100%; height: 20%">
  %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false","rotateCommitLabel":"true"},"themeVariables": {
              "gitBranchLabel0": "#ff0000",
              "gitBranchLabel1": "#00ff00",
              "gitBranchLabel2": "#0000ff",
              "git0": "#550055"
       } } }%%
    gitGraph
      commit
       branch develop
       commit
       commit
       branch release/1.0.0
       checkout release/1.0.0
       commit tag:"1.0.0-beta1"
       checkout develop
       commit
       commit
       commit
       commit
       checkout release/1.0.0
       merge develop tag: "1.0.0-beta2"
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
    %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
              "gitBranchLabel0": "#ff0000",
              "gitBranchLabel1": "#00ff00",
              "gitBranchLabel2": "#0000ff",
              "git0": "#550055"
       } } }%%
       gitGraph
      accTitle: "Git Graph"
      accDescr {
        Git Graph description.
        Multiline description
      }
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
      gitGraph
      commit type:HIGHLIGHT
      branch hotfix
      checkout hotfix
      commit type:HIGHLIGHT
      branch develop
      checkout develop
      commit id:"ash" tag:"abc" type:HIGHLIGHT
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
      checkout main
      checkout hotfix
      commit type:HIGHLIGHT
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit type:HIGHLIGHT
      checkout main
      merge hotfix
      checkout featureB
      commit type:HIGHLIGHT
      checkout develop
      branch featureA
      commit type:HIGHLIGHT
      checkout develop
      checkout featureA
      commit
      checkout featureB
      commit
      checkout develop
      merge featureA
      branch release
      checkout release
      commit type:HIGHLIGHT
      checkout main
      commit
      checkout release
      merge main
      checkout develop
      merge release
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
      gitGraph:
      commit
      commit
      branch newbranch
      commit
      merge main
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        //theme: 'dark',
        themeVariables: {
          commitLabelColor: '#9400D3',
          commitLabelBackground: '#FFFFFF',
          //       darkMode: true,
          //       background: '#222',
          //       //   textColor: 'white',
          //       //   primaryTextColor: '#f4f4f4',

          //       //   // nodeBkg: '#ff0000',
          //       //   // mainBkg: '#0000ff',
          // //   // tertiaryColor: '#ffffcc',
        },
        // theme: 'forest',
        // theme: 'neutral',
        // theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 1,
        gitGraph: { rotateCommitLabel: false },
        flowchart: { curve: 'linear', htmlLabels: true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"arial", sans-serif',
        // themeVariables: {
        //   fontFamily: '"arial", sans-serif',
        // },
        curve: 'linear',
        securityLevel: 'loose',
      });
      function callback() {
        alert('It worked');
      }
    </script>
  </body>
</html>
